<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px">
      <el-col :span="24" style="display: flex; justify-content: flex-end">
        <el-button type="primary" size="small" @click="handleAdd"
          >新增文章</el-button
        >
      </el-col>
    </el-row>
    <TheTable
      ref="tableRefs"
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
  </div>
</template>
<script>
import {
  apiArticleList,
  apiArticleAdd,
  apiArticleEdit,
  apiArticleDeleteOne,
  apiArticleGetOne,
  apiArticleGetByType,
} from "@/api/article";
export default {
  data() {
    const _this = this;
    return {
      queryParams: {},
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      queryPageApi: apiArticleList,
      tableOption: [
        {
          label: "文章名称",
          prop: "articleTitle",
          width: 150,
        },
        {
          label: "id",
          prop: "articleId",
          width: 150,
        },
        {
          label: "枚举",
          prop: "articleType",
          width: 150,
        },
        {
          label: "操作",
          width: 80,
          prop: "operate",
          fixed: "right",
          render(h, { row }) {
            return h("div", [
              h("el-link", {
                domProps: {
                  innerHTML: "查看",
                },
                props: {
                  type: "primary",
                },
                on: {
                  click() {
                    _this.handleView(row.articleId);
                  },
                },
              }),
              h("el-link", {
                domProps: {
                  innerHTML: "编辑",
                },
                props: {
                  type: "warning",
                },
                on: {
                  click() {
                    _this.handleEdit(row.articleId);
                  },
                },
              }),
              h("el-link", {
                domProps: {
                  innerHTML: "删除",
                },
                props: {
                  type: "danger",
                },
                on: {
                  click() {
                    _this.handleDel(row.articleId);
                  },
                },
              }),
            ]);
          },
        },
      ],
    };
  },
  mounted() {},
  methods: {
    handleAdd(row) {
      this.$router.push({ path: "/article/detail" });
    },
    handleView(id) {
      this.$router.push({
        path: "/article/detail",
        query: {
          mode: "view",
          id: id,
        },
      });
    },
    handleEdit(id) {
      this.$router.push({
        path: "/article/detail",
        query: {
          mode: "edit",
          id: id,
        },
      });
    },
    handleDel(articleId) {
      apiArticleDeleteOne({ articleId }).then((res) => {
        if (res.code == "SUCCESS") {
          this.$refs.tableRefs.refresh();
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-link {
  margin: 0 5px;
}
</style>
